/* components */
import { 
  SettingGPTViewDialog
} from "@src/modules/setting/gpt/components";
import SettingGPTEditViewModuleAdd from "@src/modules/setting/gpt/views/edit/module-add";
import SettingGPTEditViewModuleMixin from "@src/modules/setting/gpt/views/edit/module-mixin";
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { SettingGPTRobotPluginModules } from "@src/modules/setting/gpt/model";
/* vue */
import { defineComponent, PropType } from 'vue'
/* types */
import { SettingGPTRobotModuleConfigType, SettingGPTRobotModuleType } from "@src/modules/setting/gpt/types";
/* util */
import { isEmpty, isFalsy } from "@src/util/type";
import { message } from "@src/util/message";

type SettingGPTViewDialogComponentType = InstanceType<typeof SettingGPTViewDialog>

enum SettingGPTEditViewModuleCommonEventEnum {
  Input = 'input'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTEditViewModuleCommon,
  mixins: [SettingGPTEditViewModuleMixin],
  computed: {
    title(): string {
      return '插件应用'
    },
    subTitle(): string {
      return '开启后，小宝AI根据不同指令类型，调用不同的插件回答问题。'
    }
  },
  methods: {
    onAddModuleHandler() {
      
      if (isEmpty(this.allowAddModuleList)) {
        message.warning('没有更多可添加的插件')
        return
      }
      
      this.openDialog()
      
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTEditViewModuleCommon}>
        
        { this.renderTitle() }
        
        { this.renderSubTitleWithSwitch() }
        
        { this.renderCheckboxGroup() }
        
        <SettingGPTViewDialog
          title="添加更多"
          ref="SettingGPTViewDialog"
          onConfirm={this.onAddMoreConfirmHandler}
        >
          <SettingGPTEditViewModuleAdd
            title="插件应用"
            ref="SettingGPTEditViewModuleAdd"
            modules={this.allowAddModuleList}
            onInput={this.onAddMoreSelectValueListChangeHandler}
          >
          </SettingGPTEditViewModuleAdd>
        </SettingGPTViewDialog>
        
      </div>
    )
  }
})